<template>
  <MPageHeader :breadcrumbPush="[{ path: '/design/list', breadcrumbName: '设计列表', link: true}]">
    <template #title>
      详情
    </template>
    <template #extra>
      <a-space :size="10">
        <a-button shape="round" class="w-90" danger @click="cancelHandle">删除作品</a-button>
        <a-button shape="round" class="w-90" @click="cancelHandle">3D 预览</a-button>
        <a-button shape="round" class="w-90" type="primary" @click="gotoHandle">去设计</a-button>
      </a-space>
    </template>
  </MPageHeader>
  <MPageContainer>
    <div class="bg-fff p-2 radius-12">
      <a-row type="flex" :align="'middle'">
        <a-col flex="260px">
          <a-card  hoverable style="width: 230px; height: 230px;">
            <div class="img-review-container">
              <img src="../../assets/image/1_1.png" />
              <div class="mask">
                <div class="btn">3D 预览</div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col flex="auto">
          <a-descriptions bordered :column="2">
            <a-descriptions-item label="作品名称">慕旭茯</a-descriptions-item>
            <a-descriptions-item label="款式名称">比甲长袄</a-descriptions-item>
            <a-descriptions-item label="设计人员">王贺</a-descriptions-item>
            <a-descriptions-item label="创建时间">2023.10.10 12：23：33</a-descriptions-item>
            <a-descriptions-item label="最新修改时间">2023.10.10 12：23：33</a-descriptions-item>
            <a-descriptions-item label="历史修改次数">23</a-descriptions-item>
          </a-descriptions>
        </a-col>
      </a-row>
    </div>
  </MPageContainer>
  <MPageContainer class="mt-1 bg-fff pt-1">
    <a-tabs v-model:activeKey="activeKey" :tabBarStyle="{padding: '0 20px'}">
      <a-tab-pane key="1">
        <template #tab>
          <span>
            <svg-icon class="anticon" icon-class="home" />渲染记录
          </span>
        </template>
      </a-tab-pane>
      <a-tab-pane key="2">
        <template #tab>
          <span>
            <svg-icon class="anticon" icon-class="home" />修改记录
          </span>
        </template>
      </a-tab-pane>
      <a-tab-pane key="3">
        <template #tab>
          <span>
            <svg-icon class="anticon" icon-class="home" />素材记录
          </span>
        </template>
      </a-tab-pane>
    </a-tabs>
    <div class="pl-2 pr-2">
      <a-table
        v-if="activeKey === '1'"
        class="ant-table-striped"
        :dataSource="dataSource"
        :columns="columns1"
        :pagination="false"
        :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      >
        <template #actions="{ record }">
          <a href="javascript:;" @click="gotoDetail(record.id)">详情</a>
        </template>
        <template #customTitle>
          <span>
            可剩余下载天数
          </span>
          <a-popover placement="topLeft" trigger="click">
            <template #content>
              <div>剩余可下载天数是</div>
              <div>剩余可下载天数是剩余可下载天数是</div>
            </template>
            <QuestionCircleOutlined/>
          </a-popover>
        </template>
        <template #thumb="{ record }">
          <a-image
            :width="32"
            :height="32"
            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
          />
        </template>
      </a-table>
      <a-table
        v-if="activeKey === '2'"
        class="ant-table-striped"
        :dataSource="dataSource"
        :columns="columns2"
        :pagination="false"
        :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      >
      </a-table>
      <div v-if="activeKey === '3'" class="flex flex-wrap">
        <div v-for="i in 15" class="flex p-1 justify-center" style="width: 10%; min-width: 110px;">
          <div class="fodder-container">
            <a-image
              :width="70"
              :src="image"
            />
            <div class="btn-group">
              <img class="del" src="../../assets/image/del.png" />
              <img class="ml-8 search" src="../../assets/image/search.png" />
            </div>
          </div>
        </div>
      </div>
      <m-pagination v-if="activeKey !== '3'" v-model="pagination"></m-pagination>
    </div>
  </MPageContainer>
</template>

<script lang="ts">
  import { SearchOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue';
  import { defineComponent, getCurrentInstance, onMounted, reactive, ref } from 'vue'
  import { useStore } from '@/store'
  import { getUser } from '@/utils/token'
  import image from '@/assets/image/1_1.png'
  const PAGINATION_INIT = {
    page: 1,
    size: 10,
    total: 900
  }
  export default defineComponent({
    name: 'Welcome',
    components: {
      SearchOutlined,
      QuestionCircleOutlined
    },
    setup() {
      const { proxy }: any = getCurrentInstance()
      const pagination = reactive({ ...PAGINATION_INIT })
      const activeKey: any = ref('1')
      onMounted(() => {
        console.error('-- proxy.$router---', proxy.$router)
      })

      const cancelHandle = () => {
        proxy.$router.go(-1)
      }

      const gotoHandle = () => {
        proxy.$router.push({
          path: '/create/index',
          query: {}
        })
      }

      return {
        cancelHandle,
        gotoHandle,
        pagination,
        activeKey,
        image: image,
        dataSource: [
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
        ]
      }
    },
    computed: {
      columns1() {
        return [
          {
            title: '序号',
            dataIndex: '',
            key: 'name',
          },
          {
            title: '渲染风格',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '开始时间',
            dataIndex: 'age',
            key: 'age',
          },
          {
            title: '结束时间',
            dataIndex: 'address',
            key: 'address',
          },
          {
            title: '渲染时长',
            dataIndex: 'address',
            key: 'address',
          },
          {
            title: '状态',
            dataIndex: 'address',
            key: 'address',
          },
          {
            title: '消耗积分',
            dataIndex: 'address',
            key: 'address',
          },
          {
            dataIndex: 'download',
            key: 'download',
            slots: { title: 'customTitle', customRender: 'download' }
          },
          {
            title: '缩略图',
            dataIndex: 'thumb',
            key: 'thumb',
            slots: { customRender: 'thumb' }
          },
        ]
      },
      columns2() {
        return [
          {
            title: '序号',
            dataIndex: '',
            key: 'name',
          },
          {
            title: '修改部位',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '修改时间',
            dataIndex: 'age',
            key: 'age',
          },
          {
            title: '备注',
            dataIndex: 'address',
            key: 'address',
          }
        ]
      }
    }
  })
</script>

<style scoped lang="less">
  .header-container {
    background: #fff;
    padding: 10px 20px 14px 20px;
    box-sizing: border-box;
  }
  .count-item {
    padding: 0 20px;
    border-right: 1px solid #e3e2e2;
  }
  .count-item:last-child {
    border-right: 0;
  }
  .ant-table-striped :deep(.table-striped) td {
    background-color: #F6F8FA;
  }
  .img-review-container {
    width: 230px;
    height: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .img-review-container:hover > .mask{
    display: flex;
    transition: all 0.8s;
  }

  .fodder-container {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid #EEE;
    cursor: pointer;
    img {
      width: 70px;
      height: auto;
    }
  }
  .mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    .min-icon {
      width: 26px;
      height: 26px;
      cursor: pointer;
      position: relative;
    }
    .btn {
      display: flex;
      width: 92px;
      padding: 6px 0;
      justify-content: center;
      align-items: center;
      border-radius: 22px;
      background: #fff;
    }
  }
  .btn-group {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    cursor: pointer;
    pointer-events: none;
    .search {
      position: relative;
      z-index: 999;
      width: 24px;
      height: 24px;
      cursor: pointer;
      pointer-events: none;
    }
    .del {
      position: relative;
      z-index: 999;
      cursor: pointer;
      width: 24px;
      height: 24px;
      pointer-events: visible;
    }
  }
  .btn-group::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.3);
  }
  .fodder-container:hover > .btn-group{
    display: flex;
    transition: all 0.8s;
    justify-content: center;
    align-items: center;
  }
  .fodder-container {
    border: 1px solid #EEE;
  }
</style>
